import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Empty,
    Loading,
    ListView
} from './../../../components';

import BrowseItem from './item';

import connect from './../../../utils/connect';

import * as Const from './../../../const';

import browseAction from './../../../state/actions/browse';
import * as browseTypes from './../../../state/types/browse';

import commonAction from './../../../state/actions/common';
import * as commonTypes from './../../../state/types/common';

import normal_empty from './../../../images/empty/normal_empty.png';

interface Props {
    user: any,
    browse:any,
    openFilter():void,
    commonActions: any,
    browseActions: any
}

@connect([`browse`, `user`], {
    browseActions: browseAction,
    commonActions: commonAction
})
class Content extends PureComponent<Props, any> {
    private _listView: any = null;

    static defaultProps = {
        user:{},
        browse:{},
        commonActions:{},
        browseActions:{},
        openFilter:() => null
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser = {}
        } = user;
        return loginUser;
    }

    get lastId(): number {
        const {
            length
        } = this.queryList;
        const {
            searchResultId = 0
        } = this.queryList[length - 1] || {}
        return searchResultId;
    }

    get queryList(): Array<any> {
        const {
            browse = {}
        } = this.props;

        const {
            list = []
        } = browse || {};

        return list;
    }

    get userId() {
        const {
            userId = 0
        } = this.loginUser;
        return userId;
    }

    get browseActions(): any {
        const {
            browseActions
        } = this.props;
        return browseActions;
    }

    get commonActions() {
        const {
            commonActions
        } = this.props;
        return commonActions;
    }

    public onLoadNew = () => {
        if(this._listView) {
            this._listView.resetRefresh()
        }
    }

    private onRefresh = async (done:Function) => {
        let list = [];
        let success = true;
        try {
            list = (
                await this.onLoadList(0)
            )
        }
        catch (e) {
            success = false;
            Tip.warm({
                message: e.message
            })
        }
        done(list, success);
    }

    private onLoadList = (lastId = 0) => {
        const _query = {
            lastId: lastId
        }
        return this.browseActions[
            browseTypes.getBrowseList
        ](_query);
    }

    private onLoadPage = async (done:Function) => {
        let list = [];
        let success = true;
        try {
            list = (
                await this.onLoadList(
                    this.lastId
                )
            )
        }
        catch (e) {
            success = false;
            Tip.warm({
                message: e.message
            })
        }
        done(list, success);
    }

    private onLikePress = async (
        userId:number,
        like:boolean
    ) => {
        const _types = like ?
            commonTypes.postLikeUser :
            commonTypes.resetLikeUser;

        Loading.show();
        try {
            await this.commonActions[
                _types](userId)
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }


    private renderItem = ({item}:any) => {
        return (
            <BrowseItem
                data={item}
                onLikePress={this.onLikePress}
            />
        )
    }

    get emptyComp() {
        const {
            openFilter
        } = this.props;

        return (
            <Empty icon={normal_empty}>
                <Text
                    onPress={openFilter}
                    style={styles.openFilter}
                >
                    Refine filters
                </Text>
            </Empty>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    data={this.queryList}
                    onLoadTop={this.onRefresh}
                    ref={e => this._listView = e}
                    onLoadPage={this.onLoadPage}
                    renderItem={this.renderItem}
                    ListEmptyComponent={this.emptyComp}
                    contentContainerStyle={styles.contentContainerStyle}
                    ItemSeparatorComponent={() => <View style={styles.lineStyle}/>}
                />
            </View>
        )
    }
}

export default Content;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    content: {
        flex: 1
    },
    lineStyle: {
        height: 16
    },
    contentContainerStyle: {
        paddingHorizontal: 16
    },
    openFilter:{
        fontSize:16,
        paddingVertical:8,
        color:Const.color,
        fontFamily:Const.fontFamily,
    }
}) as any;